<template>
    <el-dialog 
        :title="type=='add' ? '新增' : '编辑'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="1200px"
        fullscreen
        :before-close="onCancel"
        :close-on-click-modal="false"
    >
        <!-- fullscreen -->
        <el-form v-loading="loading" class="form form_height noScrollbar" ref="form"  :rules="rules" :model="form"  label-width="150px" label-position="right">
            <el-row :gutter="24">
  
              <el-col :span="12">
                <el-form-item label="水库名称:" prop="reservoirName">
                  <el-input class="width100" v-model="form.reservoirName"  clearable placeholder="请输入水库名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="建站时间:" prop="setupTime">
                  <el-date-picker
                    v-model="form.setupTime"
                    type="datetime"
                    style="width: 100%;"
                    clearable
                    placeholder="选择建站时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            
             <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="水库注册号:" prop="reservoirNum">
                  <el-input class="width100" v-model="form.reservoirNum"  clearable placeholder="请输入水库注册号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="水库类型:" prop="type">
                  <el-select class="width100" v-model="form.type" placeholder="请选择水库类型">
                    <el-option
                        v-for="(item, index) in typeList3"
                        :key="index"
                        :label="item.value"
                        :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="地区编码:" prop="areaCode">
                  <el-input class="width100" v-model="form.areaCode"  clearable placeholder="请输入地区编码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="市:" prop="cityId" >
                  <el-select class="width100" v-model="form.cityId" placeholder="请选择市" @change="cityChange()">
                    <el-option
                        v-for="(item, index) in typeList0"
                        :key="index"
                        :label="item.name"
                        :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="区/县:" prop="countryId" >
                  <el-select class="width100" v-model="form.countryId" placeholder="请选择区/县" @change="areaChange()">
                    <el-option
                        v-for="(item, index) in typeList1"
                        :key="index"
                        :label="item.name"
                        :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>

            <el-row :gutter="24">
              <el-col :span="21">
                <el-form-item label="地址:" prop="address">
                  <el-input class="width100" v-model="form.address"  clearable placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="amapdialogVisible=true">选择地址</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="经度:" prop="lon">
                  <el-input class="width100" v-model="form.lon"  clearable placeholder="请输入经度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度:" prop="lat">
                  <el-input class="width100" v-model="form.lat"  clearable placeholder="请输入纬度"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="巡查责任人:" prop="patrolName">
                  <el-input class="width100" v-model="form.patrolName"  clearable placeholder="请输入巡查责任人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="巡查责任人责任:" prop="patrolDuty">
                  <el-input class="width100" v-model="form.patrolDuty"  clearable placeholder="请输入巡查责任人责任"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="巡查责任人电话:" prop="patrolPhone">
                  <el-input class="width100" v-model="form.patrolPhone"  clearable placeholder="请输入巡查责任人电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="巡查责任人单位:" prop="patrolUnit">
                  <el-input class="width100" v-model="form.patrolUnit"  clearable placeholder="请输入巡查责任人单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="巡查责任人职务:" prop="patrolPosition">
                  <el-input class="width100" v-model="form.patrolPosition"  clearable placeholder="请输入巡查责任人职务"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="管理单位责任人:" prop="manageName">
                  <el-input class="width100" v-model="form.manageName"  clearable placeholder="请输入管理单位责任人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="管理单位责任人责任:" prop="manageDuty">
                  <el-input class="width100" v-model="form.manageDuty"  clearable placeholder="请输入管理单位责任人责任"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="管理单位责任人电话:" prop="managePhone">
                  <el-input class="width100" v-model="form.managePhone"  clearable placeholder="请输入管理单位责任人电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="管理单位责任人单位:" prop="manageUnit">
                  <el-input class="width100" v-model="form.manageUnit"  clearable placeholder="请输入管理单位责任人单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="管理单位责任人职务:" prop="managePosition">
                  <el-input class="width100" v-model="form.managePosition"  clearable placeholder="请输入管理单位责任人职务"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

             <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="主管部门责任人:" prop="deptName">
                  <el-input class="width100" v-model="form.deptName"  clearable placeholder="请输入主管部门责任人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="主管部门责任人责任:" prop="deptDuty">
                  <el-input class="width100" v-model="form.deptDuty"  clearable placeholder="请输入主管部门责任人责任"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="主管部门责任人电话:" prop="deptPhone">
                  <el-input class="width100" v-model="form.deptPhone"  clearable placeholder="请输入主管部门责任人电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="主管部门责任人单位:" prop="deptUnit">
                  <el-input class="width100" v-model="form.deptUnit"  clearable placeholder="请输入主管部门责任人单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="主管部门责任人职务:" prop="deptPosition">
                  <el-input class="width100" v-model="form.deptPosition"  clearable placeholder="请输入主管部门责任人职务"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="政府责任人:" prop="goverName">
                  <el-input class="width100" v-model="form.goverName"  clearable placeholder="请输入政府责任人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="政府责任人责任:" prop="goverDuty">
                  <el-input class="width100" v-model="form.goverDuty"  clearable placeholder="请输入政府责任人责任"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="政府责任人电话:" prop="goverPhone">
                  <el-input class="width100" v-model="form.goverPhone"  clearable placeholder="请输入政府责任人电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政府责任人单位:" prop="goverUnit">
                  <el-input class="width100" v-model="form.goverUnit"  clearable placeholder="请输入政府责任人单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政府责任人职务:" prop="goverPosition">
                  <el-input class="width100" v-model="form.goverPosition"  clearable placeholder="请输入政府责任人职务"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="库容量:" prop="volume">
                  <el-input class="width100" v-model="form.volume"  clearable placeholder="请输入库容量"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="水域面积:" prop="area">
                  <el-input class="width100" v-model="form.area"  clearable placeholder="请输入水域面积"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="警戒最低水位:" prop="minimumLevel">
                  <el-input class="width100" v-model="form.minimumLevel"  clearable placeholder="请输入警戒最低水位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="汛限水位:" prop="limitLevel">
                  <el-input class="width100" v-model="form.limitLevel"  clearable placeholder="请输入汛限水位"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
             <el-row :gutter="24">
               <el-col :span="12">
                <el-form-item label="接收频率:" prop="rates">
                    <el-select class="width100" v-model="form.rates" placeholder="请选择接收频率">
                      <el-option
                          v-for="(item, index) in typeList4"
                          :key="index"
                          :label="item.value"
                          :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              <el-col :span="12">
                  <el-form-item label="物联网卡号:" prop="iotCard">
                  <el-input class="width100" v-model="form.iotCard"  clearable placeholder="请输入物联网卡号"></el-input>
                </el-form-item>
               </el-col>
            </el-row>

             <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="运营商:" prop="operator">
                  <el-input class="width100" v-model="form.operator"  clearable placeholder="请输入运营商"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务商:" prop="serviceProvider">
                  <el-input class="width100" v-model="form.serviceProvider"  clearable placeholder="请输入服务商"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="水位校准值:" prop="adjust">
                  <el-input class="width100" v-model="form.adjust"  clearable placeholder="请输入水位校准值"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="图标:" prop="imgUrl">
                    <el-upload
                        ref="uploader"
                        :headers="headers"
                        class="avatar-uploader"
                        accept=".jpg,.jpeg,.png"
                        :action="'/upload/bmfile/uploadIcon'"
                        :file-list="fileList"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        >
                        <img v-if="form.icon" :src="Url+form.icon" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="地质成图区间设置:" prop="qujianList">
                  <el-row :gutter="24">
                    <el-col :span="2" v-for="(item,index) in form.qujianList" :key="index">
                      <el-input-number v-model="form.qujianList[index]" class="width100" :controls="false"></el-input-number>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog_footer">
                <el-button type="primary" @click="onSave()" :loading="loading">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
        
    </el-dialog>
    <amap :dialogVisible="amapdialogVisible" :lng="form.lon" :lat="form.lat" @close="amapClose" @update="getamapData"></amap>
</template>
<script>
 import abcApi from '@/api/abc'
import commonApi from '@/api/index'
import amap from '@/components/address/amap.vue'
import { Url } from '@/api/url.js'

import {formatTimestamp} from '@/utils/common'
// import uploadFile from '@/components/upload/uploadFile'

export default {
    emits: ['onChange'],
    components:{
        // uploadFile
        amap
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        type:{
            default:'add',
            type: String
        },
        tabsName:{
            default:'0',
            type: String
        },
        id:{
            default:'',
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
                this.getDict()
                this.getCity();
                if(this.type == 'edit'){
                    this.loading = true
                    abcApi.findById(
                        this.id
                    ).then((res)=>{
                        this.loading = false
                        let shujuList = []
                        let shudd = '01'
                        for (const key in res.data) {
                          if(key == 'freq'+shudd){
                            shujuList.push(res.data[key] != null ? res.data[key] : 0)
                            Number(shudd)
                            shudd++
                            shudd = shudd < 10 ? '0'+shudd : shudd
                          }
                        }
                        res.data.qujianList = shujuList
                        console.log(res.data)
                        this.form = res.data
                        if (this.form.cityId) {
                            this.getArea();
                        }
                        
                    }).catch((err)=>{
                        this.loading = false
                    })
                }
            }else{
                this.$refs['form'].resetFields()
                Object.assign(this.$data,this.$options.data())
            }
        }
    },
    data(){
      var validatePass = (rule, value, callback) => {
        console.log(value)
        if (value === '') {
          callback(new Error('请输入数值'));
        } else {
          let kkdd = value
          let jjj = true
          kkdd.sort((a,b)=>{
            if(a <= b){
              jjj = false
            }
          })
          if(jjj){
            callback();
          }else {
            callback(new Error('前一位小于后一位'));
          }
          
        }
      };
        return {
            loading:false,
            amapdialogVisible:false,
            form:{
                files:[],
                qujianList:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
            },
            Url,
            fileList: [],
            headers:{
                'Authorization': localStorage.getItem('token')
            },
            rules:{
                reservoirName: [
                    { required: true, message: '请输入水库名称', trigger: ['change','blur'], }
                ],
                setupTime: [
                    { required: true, message: '请选择建站时间', trigger: ['change','blur'], }
                ],
                cityId: [
                    { required: true, message: '请选择所在市', trigger: ['change','blur'], }
                ],
                countryId: [
                    { required: true, message: '请选择所区/县', trigger: ['change','blur'], }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: ['change','blur'], }
                ],
                patrolName: [
                    { required: true, message: '请输入责任人', trigger: ['change','blur'], }
                ],
                adjust: [
                    { required: true, message: '请输入水位校准值', trigger: ['change','blur'], }
                ],
                qujianList: [
                  { validator: validatePass, trigger: ['change','blur'], }
                ],
                
                
            },
            // 下拉
            typeList0:[],//市
            typeList1:[],//区县
            typeList2:[],
            typeList3:[],//水库类型
            typeList4:[],//接收频率
        }
    },
    methods:{
        // 获取下拉数据
        getDict() {
            // homeApi.getAccidentTypeList('')
            // .then(res => {
            //     this.typeList = res.data
            // })
            commonApi.getByType('SKLX')
                .then(res => {
                    this.typeList3 = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
            commonApi.getByType('JSPL')
                .then(res => {
                    this.typeList4 = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
        getCity(){
            commonApi.queryAeraList({parentCode:'43'})
            .then(res => {
                this.typeList0 = res.data
            })
        },
        getArea(){
            commonApi.queryAeraList({parentCode:this.form.cityId})
            .then(res => {
                this.typeList1 = res.data
            })
        },
        // getStreet(){
          
        //     commonApi.queryAeraList({parentCode:this.form.countryId})
        //     .then(res => {
        //         this.typeList2 = res.data
        //     })
        // },
        cityChange(){
          this.form.countryId='';
          this.form.townId='';
          this.getArea();
        },
        areaChange(){
          // this.form.townId='';
          // this.getStreet();
        },

        handleAvatarSuccess(res) {
            // this.form.picture = res.data.fileUrl
            if(res.code == 200) {
                
                this.form.icon = res.data
            }else {
                this.$message.error(res.message||'上传失败')
            }
        },
        beforeAvatarUpload(file) {
            if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg') {
                this.$message.warning('请上传图片格式')
                return false
            }
        },
       


        onSave(){
            
            this.$refs['form'].validate((valid) => {
                if (valid) {
                  var api = this.type == 'add' ? abcApi.save : abcApi.update
                  this.loading = true
                  this.form.setupTime=formatTimestamp(this.form.setupTime,'yyyy-MM-dd hh:mm:ss');
                  this.form.townId=0;
                  let shudd = '01'
                  this.form.qujianList.map(item=>{
                    this.form['freq'+shudd] = item
                    shudd++
                    shudd = shudd < 10 ? '0'+shudd : shudd
                  })
                  api({
                      ...this.form
                  }).then((res)=>{
                      this.loading = false
                      this.$emit('onChange',{bool:false,refresh:true})
                      this.$message.success(res.message ||'提交成功')
                  }).catch((err)=>{
                      this.loading = false
                      this.$message.error(err.message||err.data.message)
                  })
                } else {
                    return false
                }
            })
        },

        amapClose(){
            this.amapdialogVisible = false
        },
        getamapData(val){
            console.log(val)
            this.form.lat = val.lat
            this.form.lon = val.lng
            this.form.address = val.textName
        },

       
        onCancel(){
            this.$emit('onChange',{bool:false})
        },
        // 表格
        
        
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        // max-height: 80vh;
        // overflow-y: auto;
         padding-bottom: 20px;
    }
    .width100{
        width: 100%;
    }
    .dialog_footer{
      display: flex;
      justify-content: center;
      // position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 20px 0;
      z-index: 1;
    }
    ::v-deep .tree_select .el-tree-node__content{
      height: 38px;
    }

</style>

